<template>
    <view>
        <!-- 遮罩层 -->
        <view class="popup-mask" v-if="visible"></view>

        <!-- 弹窗内容 -->
        <view class="popup-container" v-if="visible">
            <view class="popup-content">
                <view class="tips">
                    <view>恭喜您通过推广成功注册，平台已发放您</view>
                    <view>的专属优惠券大礼包至个人中心-优惠券</view>
                </view>
                <!-- 优惠券列表 -->
                <view class="coupon-list">
                    <view class="coupon-item un-used" v-for="(item, index) in couponsData" :key="index">
                        <view class="coupon-left">
                            <view class="coupon-value"><text class="coupon-flats">￥</text>{{parseInt(item.amount)}}</view>
                            <view class="coupon-unit">优惠券</view>
                        </view>
                        <view class="coupon-right">
                            <view class="coupon-title">{{ item.title }}</view>
                            <view class="coupon-date">有效期：{{ item.days }}日</view>
                            <view class="coupon-footer">
                                <view class="coupon-rules">
                                    <text>使用规则</text>
                                    <image v-if="!showRules[index]" class="gray-detail-icon"
                                        src="/static/personalCenter/gray-right.png" mode="aspectFill"></image>
                                    <image v-if="showRules[index]" class="gray-detail-icon"
                                        src="/static/personalCenter/gray-right.png" mode="aspectFill"
                                        style=" transform: rotate(-90deg); transform-origin: 70% 50%;"></image>
                                </view>

                            </view>

                        </view>
                    </view>
                    <!-- 优惠券使用规则 -->
                    <view v-if="false" class="rules-details-warps">
                        <view class="rules-shape">
                            <text class="rules-shape-item"></text>
                            <text class="rules-shape-item"></text>
                        </view>
                        <view class="rules-content">
                            <view class="rules-content-warps">
                                <view class="rule-title">使用规则：</view>
                                <view class="rule-item">1、优惠券可降低产品的价格，是一种常见的消费者营业推广工具。</view>
                                <view class="rule-item">2、优惠券可以印在杂志的插页上</view>
                                <view class="rule-item">3、或夹在报纸中随附送</view>
                            </view>
                        </view>
                    </view>

                </view>
                <view class="btn-warps">
                    <view class="common-btn action-btn" @click="handlePublishTrip">查看全部优惠券</view>
                </view>


                <view class="popup-footer">
                    <image src="/static/personalCenter/auth-close.png" mode="aspectFill" @click="close"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        couponsData: {
            type: Array,
            default: []
        }
    },
    watch: {
        visible(val) { },
    },
    data() {
        return {
            isChecked: false,
            // tousedCoupons: [{}, {}, {}], // 未使用优惠券数据
            showRules: {}, // 控制规则显示
        }
    },
    methods: {
        close() {
            this.$emit('update:visible', false)
        },
        handlePublishTrip() {
            this.$emit('update:data')
        }
    }
}
</script>

<style scoped>
.popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
}

.popup-container {
    position: fixed;
    top: 13%;
    left: 0;
    right: 0;
    z-index: 999;
    transition: all 0.3s ease;
    margin: 0 26rpx;

}

.popup-content {
    width: 100%;

    background-image: url("~@/static/home/packs-bg.png");
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

/* 关闭按钮样式 */
.popup-footer {
    position: absolute;
    bottom: -100rpx;
    left: 340rpx;
}

.popup-footer image {
    width: 48rpx;
    height: 48rpx;
}

/* 优惠券列表样式 */
.btn-warps {
    padding-bottom: 58rpx;
}

.action-btn {
    margin: 40rpx 90rpx 0 90rpx;
}

.tips {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 48rpx;
    text-align: center;
    padding-top: 164rpx;
    padding-bottom: 54rpx;
}

.coupon-list {
    margin: 0 90rpx 20rpx 90rpx;
}

.coupon-item {
    /* width: calc(100% - 116rpx);   */
    display: flex;
    overflow: hidden;
    position: relative;
    margin-bottom: 20rpx;


}

.coupon-left {
    width: 160rpx;
    text-align: center;
    padding-top: 38rpx;
}

.coupon-item.un-used {
    background-image: url("~@/static/personalCenter/coupon-1.png");
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;

}

.coupon-value {
    font-family: DIN Pro, DIN Pro;
    font-weight: 700;
    font-size: 48rpx;
    color: #FFFFFF;
    line-height: 42rpx;
    padding-bottom: 12rpx;
}

.coupon-flats {
    font-size: 32rpx;
}

.coupon-unit {
    font-family: Source Han Sans, Source Han Sans;
    font-size: 24rpx;
    color: #FFFFFF;
}

.coupon-right {
    flex: 1;
    padding: 26rpx 20rpx 22rpx 44rpx;
}

.coupon-title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 28rpx;
    color: #0B1F20;
    line-height: 42rpx;
    letter-spacing: 1px;
    margin-bottom: 14rpx;
}

.coupon-date {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 24rpx;
    color: #999999;
    line-height: 36rpx;
    margin-bottom: 10rpx;
}

.coupon-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.coupon-rules {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 24rpx;
    color: #697592;
    line-height: 36rpx;
    display: flex;
    align-items: center;
}

.gray-detail-icon {
    width: 28rpx;
    height: 28rpx;
}



.rules-content {
    padding: 8rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    /* position: absolute;
  left: 0rpx;
  bottom: 0; */
}

.rules-content-warps {
    border-radius: 16rpx;
    border: 2rpx dashed #FF7937;
    padding: 20rpx 0 20rpx 20rpx;
}

.rule-title {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 28rpx;
    color: #0B1F20;
    line-height: 42rpx;
    padding-bottom: 12rpx;
}

.rule-item {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-size: 26rpx;
    color: #697592;
    line-height: 40rpx;
}


.rules-shape {
    display: flex;
    justify-content: space-between;
    padding: 0 40rpx;
}

.rules-shape-item {
    width: 12rpx;
    height: 20rpx;
    background: #FF7937;
    display: block;

}
</style>